<template>
	<view class="content">
		<!-- 我的顶部 -->
		<view class="user_box">
			<view class="btn_box" v-if="getUserInfo==null">
				<u-button size="mini" @click="goForm()" type="primary" text="获取用户信息"></u-button>
			</view>
			<view class="info_box" v-else>
				<view class="img_box">
					<u-avatar  @click="login()" :src="getUserInfo.avatarUrl" shape="circle" :size="50"></u-avatar>
				</view>
				<text class="text_box">{{getUserInfo.nickName}}</text>
				<u-row>
					<u-col :span="4">
						<view class="col_box">
							<text class="col_box_num">{{getUserInfo.days}}</text><br>
							<text class="col_box_str">使用天数</text>
						</view>
					</u-col>
					<u-col :span="4">
						<view class="col_box">
							<text class="col_box_num">{{getUserInfo.useDays}}</text><br>
							<text class="col_box_str">记账天数</text>
						</view>
					</u-col>
					<u-col :span="4">
						<view class="col_box">
							<text class="col_box_num">{{getUserInfo.useNum}}</text><br>
							<text class="col_box_str">记账次数</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		name: "head_me",
		data() {
			return {
			}
		},
		created() {

		},
		mounted() {
			this.init();
		},

		computed: {
			...mapGetters(['getUserInfo'])
		},
		methods: {
			...mapMutations(['setUserInfo','logout']),

      goForm(){
        uni.navigateTo({
          url: '/pages/record/loginForm'
        })
      },

			//初始化
			init(){
				this.$request("/statistics-me/use").then(res=>{
          //设置vuex缓存
          this.setUserInfo(res)
				})
			},

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		background: #ffff00;
		border-radius: 50rpx;
		height: 100%;
		.user_box {
			width: 100%;
			.btn_box {
				width: 30%;
				padding: 20rpx;
				box-sizing: border-box;
				margin: 0 auto;
			}

			.info_box {
				padding: 20rpx;
				box-sizing: border-box;
				text-align: center;
				.img_box {
					width: 50px;
					margin: 0 auto;
				}
			}

			.text_box {
				margin-top: 10rpx;
			}

		}

		.col_box {
			text-align: center;
			width: 100%;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
		}
	}
</style>
